<template>

  <div>
    
    <div class="chain-link-bar-wrapper">
  		<el-breadcrumb separator-class="el-icon-arrow-right">
	  		<el-breadcrumb-item>活动管理</el-breadcrumb-item>
	  		<el-breadcrumb-item to="/activity">活动列表</el-breadcrumb-item>
	  	</el-breadcrumb>  
	</div>

  

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>活动列表</span>

      </div>

      <div class="app-diliver-10"></div>

      <div class="clearfix app-tabs-wrapper color-black-third">
        <span 
          :class="{'color-theme': page.checkStatus == ''}" 
          class="app-tab app-margin-r-40" 
          @click="selectTabStatus('')"
          >全部</span>
        <span 
          :class="{'color-theme': page.checkStatus == 'NOT'}" 
          class="app-tab app-margin-r-40" 
          @click="selectTabStatus('NOT')"
          >未审核</span>
        <span 
          :class="{'color-theme': page.checkStatus == 'PASS'}" 
          class="app-tab app-margin-r-40"
          @click="selectTabStatus('PASS')"
          >审核通过</span>
        <span 
          :class="{'color-theme': page.checkStatus == 'FAIL'}" 
          class="app-tab app-margin-r-40"
          @click="selectTabStatus('FAIL')"
          >不通过</span>
        <span :class="{ 'color-theme': page.checkStatus == 'END' }" class="app-tab app-margin-r-40" @click="selectTabStatus('END')">已下架</span>
        <span :class="{ 'color-theme': page.checkStatus == 'DELETE' }" class="app-tab app-margin-r-40" @click="selectTabStatus('DELETE')">已删除</span>
      </div>

      <div class="app-diliver-15"></div>
      <div class="app-diliver-15"></div>

      <div>
        <div class="app-display-inline app-margin-h-20">
          <span class="color-black-second font-size-text">关键字：</span>
          <el-input
            clearable
            placeholder="活动名、活动内容"
            v-model="page.keyWord"
            style="width: 380px;"
              ></el-input>
        </div>

        <div class="app-display-inline app-margin-h-20">
          <SubmitButton
            type="primary" 
            plain
            icon="el-icon-search"
            :post-option="{
              url: searchUrl,
              data: page,
              callback: searchCB
            }"
            >搜索</SubmitButton>
        </div>
      </div>

      <div class="app-diliver-15"></div>
      <div class="app-diliver-15"></div>
      
      <el-table :data="activityList" stripe border @sort-change="sortMethod" style="width: 100%" class="nc-table-btn-ctrl">
        <el-table-column type="index" :index="indexMethod">
        </el-table-column>
        
        <el-table-column
          label="活动介绍"
          width="300">
          <template slot-scope="scope">
            <span>{{scope.row.title}}</span>
            <span v-if="scope.row.tag != null">&nbsp;|&nbsp;{{scope.row.tag}}</span>
            <br>
            <span>{{scope.row.content}}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="最大人数"
          width="200">
          <template slot-scope="scope">
           <!-- <span>{{scope.row.people_min_number}}</span>
            ~-->
            <span>{{scope.row.people_max_number}}</span>
          </template>
        </el-table-column>

        <el-table-column label="有效日期" prop="end_date_time" sortable="custom" >
          <template slot-scope="scope">
            <span>{{scope.row.start_date_time}}</span>
            <br>~<br>
            <span>{{scope.row.end_date_time}}</span>
          </template>
        </el-table-column>

        <el-table-column label="发布日期" prop="create_date_time" sortable="custom" >
        </el-table-column>

        <el-table-column sortable="custom" label="审核|有效状态" prop="check_status">
          <template slot-scope="scope">
            <div v-if="scope.row.is_delete == 'NO'">
              <span class="text-bold color-warning" v-if="scope.row.check_status == 'NOT'">待审核</span>
              <span class="text-bold color-success" v-if="scope.row.check_status == 'PASS'">通过</span>
              <span class="text-bold color-danger" v-if="scope.row.check_status == 'FAIL'">未通过</span>
              &nbsp;|&nbsp;
              <span class="text-bold color-danger" v-if="scope.row.sold_out == 1">已下架</span>
              <span class="text-bold color-success" v-if="scope.row.sold_out == 0 && scope.row.activity_status == 'BE'">未开始</span>
              <span class="text-bold color-success" v-if="scope.row.sold_out == 0 && scope.row.activity_status == 'ING'">进行中</span>
              <span class="text-bold color-success" v-if="scope.row.sold_out == 0 && scope.row.activity_status == 'END'">结束</span>
              <span class="text-bold color-success" v-if="scope.row.sold_out == 0 && scope.row.activity_status == 'CANCEL'">取消</span>
            </div>
            <span class="text-bold color-danger" v-if="scope.row.is_delete == 'YES'">已删除</span>
          </template>
        </el-table-column> 

        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <div v-if="scope.row.is_delete == 'NO'">
            <el-button
              v-if="scope.row.check_status != 'PASS'"
              type="success" 
              plain 
              size="mini" 
              @click="checkStatusHandle(scope.row.id, 1)">通过</el-button>
            <el-button
              v-if="scope.row.check_status != 'FAIL'"
              type="warning" 
              plain 
              size="mini" 
              @click="checkStatusHandle(scope.row.id, 0)">不通过</el-button>
            

            <NcButton
			  v-if="role > 1"
              size="mini"
              type="danger"
              :post-option="{url: deleteUrl, callback: getPage, confirm: '确定要删除活动信息【'+ scope.row.title +'】吗？', data: {id: scope.row.id} }"
              class="app-margin-l-10 app-margin-v-5"
              >删除</NcButton>

            <a class="" :href="'#/activity/detail/' + scope.row.id" target="_blank">
              <el-button
              plain 
              size="mini" 
              >详情</el-button>
            </a>
            </div>
          </template>
        </el-table-column>
      </el-table>


      <div class="pager-bar-wrapper">
        <el-pagination
          background
          layout="prev, pager, next, total"
          :total="page.totalRow"
          :page-size="page.pageSize"
          :current-page="page.pageNum"
          @current-change="pageNumChange"
          @prev-click="pageNumChange"
          @next-click="pageNumChange"
          @size-change="pageSizeChange"
          >
        </el-pagination>
      </div>

    </el-card>	

    <CheckStatusEdit :is-show="checkStatusEditVisible" :activity-obj="editActivity" :check-yes="checkYes"></CheckStatusEdit>

  </div>

</template>

<script>
import NcButton from '../common/NcButton';
import SubmitButton from '../common/SubmitButton';
import CheckStatusEdit from './CheckStatusEditDialog';

import Api from '../../api/Api';
import ActivityApi from '../../api/ActivityApi';

import JsonKit from '../../kit/JsonKit';

import { mapGetters } from 'vuex';
//需要导入vuex的数据管理
import Store from '../../store/index.js'

export default {
	components: {
		NcButton,
		SubmitButton,
		CheckStatusEdit
	},
	data() {
		return {
			activityList: [],

			page: {
				checkStatus: '',
				keyWord: '',
				columnProp: '',
				columnOrder: '',
				pageNum: 1,
				pageSize: 10
			},

			checkStatusEditVisible: false,
			checkYes: 0,
			editActivity: {},

			searchUrl: ActivityApi.URL_LIST,
			deleteUrl: ActivityApi.URL_DELETE,
			
			role: 0
		};
	},
	computed: {
		...mapGetters(['hasPerm'])
	},
	created() {
		this.getPage();
		this.$root.eventHub.$on('closeEditDialog', this.hideEditDialog);
		this.role = Store.state.user.role;
	},
	beforeDestroy: function() {
		this.$root.eventHub.$off('closeEditDialog', this.hideEditDialog);
	},
	methods: {
		sortMethod(column) {
			this.page.columnProp = column.prop;
			this.page.columnOrder = column.order;
			this.getPage();
		},
		searchCB(json) {
			this.activityList = json.list;
			this.setPage(json);
		},
		getPage() {
			ActivityApi.list(this.page, json => {
				this.activityList = json.list;
				this.setPage(json);
			});
		},
		pageNumChange(pageNum) {
			this.page.pageNum = pageNum;
			this.getPage();
		},
		pageSizeChange(pageSize) {
			this.page.pageSize = pageSize;
			this.getPage();
		},
		setPage(json) {
			this.page.pageNum = json.pageNum;
			this.page.pageSize = json.pageSize;
			this.page.totalRow = json.totalRow;
		},
		indexMethod(index) {
			return index + 1 + (this.page.pageNum - 1) * this.page.pageSize;
		},
		selectTabStatus(checkStatus) {
			this.page.checkStatus = checkStatus;
			this.page.pageNum = 1;
			this.getPage();
		},
		checkStatusHandle(activityId, checkYes) {
			this.editActivity = JsonKit.getOf(this.activityList, 'id', activityId, null);
			this.checkYes = checkYes;
			this.checkStatusEditVisible = true;
		},
		hideEditDialog(isSuccess) {
			this.checkStatusEditVisible = false;
			this.editActivity = {};

			if (isSuccess) {
				this.getPage();
			}
		}
	}
};
</script>
